<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>4.人员案例_优化</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <input type="text" v-model="keyword">
      <ul>
        <li v-for="p in persons2" :key="p.id">
          {{p.name}} - {{p.age}} - {{p.gender}}
        </li>
      </ul>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          keyword:'',
          persons:[
            {id:'asfdtaf01',name:'马冬梅',age:18,gender:'女'},
            {id:'asfdtaf02',name:'周冬雨',age:19,gender:'女'},
            {id:'asfdtaf03',name:'周杰伦',age:16,gender:'男'},
            {id:'asfdtaf04',name:'温兆伦',age:30,gender:'男'}
          ],
          persons2:[]
        },
        watch:{
          keyword:{
            immediate:true,
            handler(value){
              console.log(value)
              // 拿到persons数组，过滤该数组，留下名字中包含value的。
              this.persons2 = this.persons.filter( item => item.name.includes(value) )
            }
          }
        }
      })
    </script>
  </body>
</html>